<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/26
  Time: 15:09
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>



<c:forEach items="${requestScope.pageInfo.list}" var="t" varStatus="stat">
    <li><%--最高级父级评论--%>

        <div class="us">
            <span>${(requestScope.pageNum-1)*requestScope.pageSize+stat.count}楼</span><br>
            <img src="<%=path%>/static/images/1.jpg" alt="评论者">
            <span>${t.userinfo.nickname}</span>
            <span>${t.inputTime}</span>
            <c:if test="${sessionScope.userinfo ne null}">
            <span><a href="#submitComment" class="toWriteComment" onclick="toWriteComment(this);" data-pn="${t.userinfo.nickname}" data-pi="${t.id}">回复TA</a> </span>
            </c:if>
        </div>
        <h3>${t.content}</h3>
        <c:if test="${t.childrenCount ne 0}">
           <ul class="ul${t.id}" ><%--往下一层的子级评论放在这个ul里面--%>
              <li class="li${t.id}"><a href="javascript:void(0);" class="getChildrenComments" data-id="${t.id}"> 显示${t.childrenCount}条回复</a></li>
           </ul>
         </c:if>
    </li>
</c:forEach>

<div style="text-align: center">
<c:forEach items="${requestScope.pageInfo.navigatepageNums}" var="i">
    <a href="javascript:void(0);" class="fatherComments" data-id="${i}" id="page${i}"><span>[${i}]</span></a>
</c:forEach>
</div>

<script src="<%=path%>/static/js/jquery-3.3.1.min.js"></script>
<script src="<%=path%>/static/js/layui/layui.all.js"></script>
<script>
    $(function () {
        //页码点击事件
        $(".fatherComments").click(function () {
            pageNum = $(this).data("id");
            toAjax();
        })

        $(".getChildrenComments").click(function () {//给获取子级评论的a标签添加点击事件
            var id = $(this).data("id");
            $.ajax({
                url:"<%=path%>/web/article/childrenCommentData",
                async:false,
                data:{id:id},
                type:"GET",
                success:function (data) {
                    $(".ul"+id).html(data);
                }
            })
        });
    })
</script>